<template>
	<view class="container">
		<!-- 包裹可滚动内容的容器 -->
		<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="lower">
			<!-- 	  <view class="privacy" v-for="(item, index) in list" :key="index">  
		{{ item }}  
	  </view> -->
			<uni-list>
				<template v-for="(item, key, index) in list">
					<uni-list-item title="权限设置" v-bind:note="item" :show-switch="true" switchChecked="true" @switchChange="switchChange">
					</uni-list-item>
				</template>
			</uni-list>
		</scroll-view>
		<view class="bottom_btn">
			<text class="info">请滑动阅读所有权限</text>
			<view class="button-group">
				<button class="button fixed-button cancle" @click="handleCancle()">取消</button>
				<button :style="{ backgroundColor: confirmColor }" class="button fixed-button confirm"
					:disabled="!isBtnEnabled" @click="handleClick1('button1')">确定</button>
			</view>
		</view>
		<view>
			<!-- 其他页面内容 -->
			<retention-dialog :showConfirmDialog="showConfirmDialog" title="确认删除" message="为了提供更好的的服务,需要授权权限"
				confirm-text="继续" cancel-text="放弃" @confirm="handleConfirm" @cancel="handleCancel"></retention-dialog>
		</view>
	</view>
</template>


<script>
	import RetentionDialog from '@/pages/login/components/retentionDialog';
	export default {
		components: {
			RetentionDialog
		},
		data() {
			return {
				isBtnEnabled: false, // 控制按钮是否可用 
				confirmColor: "#808080",
				list: Array.from({
					length: 50
				}, (_, i) => `Item ${i + 1}`),
				showConfirmDialog: true // 控制确认框的显示与隐藏  
			}
		},

		methods: {
			lower() {
				console.log("滚动到底部");
				this.confirmColor = "#007AFF";
				this.isBtnEnabled = true;
			},
			handleCancle() {
				this.showConfirmDialog = true
			},
			handleClick1(buttonName) {
				uni.navigateTo({
					url: '/pages/login'
				});
			},
			handleConfirm() {
				// 确认完成的逻辑
				console.log('确认完成')
				this.showConfirmDialog = false
			},
			handleCancel() {
				console.log('确认取消')
				this.showConfirmDialog = false
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: #FFFFFF;
	}

	.container {
		display: flex;
		height: 100%;

		/* 视口高度 */
		.scroll-view {
			background-color: #FFFFFF;
			margin: 5px 0px 85px 0px;
			padding: 55rpx, 30rpx;

			/* 可选，添加一些内边距 */
			.privacy {}
		}

		.bottom_btn {
			display: flex;
			flex-direction: column;
			justify-content: center;
			/* 子元素水平居中 */
			align-items: center;
			/* 子元素垂直居中（如果容器是单行的话） */
			text-align: center;
			width: 100%;
			height: 80px;
			position: fixed;
			bottom: 5px;

			.info {
				color: #007AFF;
			}

			.button-group {
				display: flex;
				justify-content: center;
				/* 子元素水平居中 */
				align-items: center;
				/* 子元素垂直居中（如果容器是单行的话） */
				text-align: center;

				.button {
					flex: 1;
					width: 250rpx;
					height: 35px;
					margin-top: 10px;
					text-align: center;
					/* 确保文本居中，尽管这通常是默认的 */
					font-size: 16px;
					color: #FFFFFF;
					border-radius: 10px;
				}

				.cancle {
					background-color: #808080;
					/* 设置灰色背景 */
				}

				.confirm {
					margin-left: 20px;
				}
			}

		}
	}
</style>